<template>
    <div aria-label="A complete example of page header">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item
                v-for="(item, index) in navList"
                :key="item.path"
                :to="navList.length === index ? '' : item.path"
            >
                {{ item.meta.title || item.name }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const navList = ref<any>(null);
const route = useRoute();

onBeforeMount(() => {
    navList.value = route.matched;
});
watch(route, (newdate, olddata) => {
    console.log('weishenmebianhua', newdate.matched);
    navList.value = newdate.matched;
});
</script>
<style lang="scss">
.el-breadcrumb {
    margin: 10px 0;
}
</style>
